$(function() {
	/* 1. 分类列表分页展示 */
	var currentPage = 1
	var render = function () {
		// 1.1 初始化页面
		getCategoryFirstData({
			page: currentPage,
			pageSize: 2
		}, function(res) {
			// console.log(res)
			// 1.2 模板渲染
			$('.table tbody').html(template('firstCategoryTpl', res))
			
			// 2.0 分页展示渲染
			setPaginator(res.page, Math.ceil(res.total / res.size), render)
		})
	}
	render()
	
	/* 2. 分页展示 */
	var setPaginator = function (cp, pages, callback) {
		// 2.1 初始化配置 
        var options = {
        	bootstrapMajorVersion: 3,  // 版本信息
        	size: 'small',             // 字体为小号
        	currentPage: cp,           // 当前页面  
        	totalPages: pages,         // 总页数 
        	onPageClicked: function (event, originalEvent, typePage, curPage) { // 点击页面事件
            	// 事件：typePage是被点击的页码
            	// 2.2 获取当前点击的页数
            	// console.log(curPage)
            	// 2.3 重新请求渲染
            	currentPage = curPage
            	callback && callback()
           	}
        }
		$('.pagination').bootstrapPaginator(options)
	}
	
	/* 3. 添加一级分类 */
	$('#addBtn').on('click', function() {
		// 3.1 显示模态框
		$('#addModal').modal('show')
	})
	// 3.4 点击取消和关闭按钮重置表单验证
	$('.btn-default, .close').on('click', function() {
		$('#form').data("bootstrapValidator").resetForm()
	})
	// 3.2 表单验证
	$('#form').bootstrapValidator({
     	message: 'This value is not valid',
        feedbackIcons: {/*input状态样式图片*/
             valid: 'glyphicon glyphicon-ok',
             invalid: 'glyphicon glyphicon-remove',
             validating: 'glyphicon glyphicon-refresh'
         },
        fields: {/*验证：规则*/
            categoryName: {//验证input项：验证规则
                message: '用户名无效',
                validators: {
                    notEmpty: {//非空验证：提示消息
                        message: '添加的一级分类不能为空'
                    }
                }
            }
        }
    }) // 3.3. 点击登录
    .on('success.form.bv', function(e) {
        // 3.3.1 禁用默认提交的事件 因为要使用ajax提交而不是默认的提交方式
        e.preventDefault()
        // 3.3.2 获取当前的表单  serialize() 方法通过序列化表单值 序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中
        var $form = $(e.target)
        // console.log($form.serialize()) //  username=itcast&password=111111
        // 3.3.3 发送登录请求
        $.ajax({
            type:'post',
            url:'/category/addTopCategory',
            data:$form.serialize(),
            dataType:'json',
            success:function (res) {
                if(res.success){
                    /*关闭模态框*/
                    $('#addModal').modal('hide')
                    /*渲染第一页*/
                    currentPage = 1
                    render()
                    /*重置表单*/
                    $form.data('bootstrapValidator').resetForm()
                    $form.find('input').val('')
                }
            }
        })
    })
})
// 获取一级分类数据
var getCategoryFirstData = function (params, callback) {
	$.ajax({
		type:"get",
		url:"/category/queryTopCategoryPaging",
		async:true,
		data: params,
		success: function(res) {
			callback && callback(res)
		}
	})
}
